<template>
    <div class="login-records">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="用户名">
                <el-input v-model="formInline.userName" placeholder="请输入用户名" clearable />
            </el-form-item>
            <el-form-item label="时间范围">
                <el-date-picker v-model="formInline.time" type="daterange" range-separator="To"
                    start-placeholder="Start date" end-placeholder="End date" size="small" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="show = true">添加</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table ref="singleTableRef" :data="tableData" highlight-current-row border stripe align="center" size="small"
            style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column property="userName" label="用户名" align="center" width="120" />
            <el-table-column property="location" label="登录地点" align="center" />
            <el-table-column property="ipAddress" label="登录IP" width="120" align="center" />

            <el-table-column property="loginTime" label="登录时间" align="center">
                <template v-slot="{ row }">
                    <div class="content">
                        {{ formatData(row.loginTime) }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <Pagination @getDate="getAllUserInfo" :queryNum="queryCount" />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from "vue"

// 引入封装的分页器
import Pagination from "@/components/base/MyPagination.vue";
import { ElMessage } from "element-plus";
import { loginLecords } from "@/api/index";

// 格式化时间
const formatData = (cellValue) => {
    var s = new Date(cellValue).toLocaleString();
    return s;
};
// 收集筛选条件
const formInline = reactive({
    userName: "",
    time: []

});
// 提交搜索条件
const queryCount = ref(1);
// 提交搜索条件
const onSubmit = () => {
    queryCount.value += 1;
};
// 收集表格数据
const tableData = ref([
]);
//获取全部数据
const getAllUserInfo = async (page) => {
    const params = {
        pageNum: page.pageNum,
        pageSize: page.pageSize,
    };
    for (const key in formInline) {
        if (formInline[key] != null && formInline[key] !== "" && key != 'time') {
            params[key] = formInline[key];
        } else if (formInline.time.length > 0) {
            params.startTime = formInline[key][0];
            params.endTime = formInline[key][1];
        }
    }
    const res = await loginLecords(params);
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    ElMessage({
        showClose: true,
        message: `查询成功!`,
        type: "success",
    });
    tableData.value = res.data.list;
    page.totalCount = res.data.totalCount;
};

</script>

<style lang="scss" scoped>
.login-records {
    background-color: #fff;
    padding: 10px;
}
</style>